<template>
  <div id="handleDialog">
    <el-dialog
      :title="handleDialogData.type === 'add' ? '添加学院' : '编辑学院'"
      :visible.sync="handleDialogData.isShow"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="名称" prop="name">
          <el-input
            style="width: 310px"
            v-model="ruleForm.name"
            placeholder="请输入分类名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="显示序号" prop="ordered">
          <el-input style="width: 90px" v-model="ruleForm.ordered"></el-input
          ><span>(显示序号需为整数，从小到大排序)</span>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select
            style="width: 310px"
            v-model="ruleForm.status"
            placeholder="请选择课程状态"
          >
            <el-option label="未发布" value="DRAFT"></el-option>
            <el-option label="已发布" value="PUBLISHED"></el-option>
            <el-option label="已隐藏" value="HIDE"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="评价之星" prop="isShowStars">
          <el-select
            style="width: 310px"
            v-model="ruleForm.isShowStars"
            placeholder="请选择评价之星"
          >
            <el-option label="显示" :value="true"></el-option>
            <el-option label="不显示" :value="false"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" @click="confirmHandle('ruleForm')"
          >确 定</el-button
        >
        <el-button @click="handleDialogData.isShow = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { addCollege, editCollege } from '@/api/classifyManage/classifyManage'
export default {
  props: {
    handleDialogData: {
      type: Object,
      default: () => {
        return {
          isShow: false,
          params: ''
        }
      }
    }
  },
  data() {
    return {
      ruleForm: {
        name: '',
        ordered: '',
        status: '',
        isShowStars: null
      },
      rules: {
        isShowStars: [
          { required: true, message: '请选择评价之星', trigger: 'blur' }
        ],
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        ordered: [
          { required: true, message: '请输入显示序号', trigger: 'blur' }
        ],
        status: [{ required: true, message: '请选择课程状态', trigger: 'blur' }]
      }
    }
  },
  watch: {},
  mounted() {
    this.ruleForm.gradeId = this.handleDialogData.gradeId
    if (this.$route.query.id) {
      this.ruleForm.parentId = this.$route.query.id
    }
    if (this.handleDialogData.type === 'edit') {
      this.ruleForm.name = this.handleDialogData.params.name
      this.ruleForm.ordered = this.handleDialogData.params.ordered
      this.ruleForm.status = this.handleDialogData.params.status
      this.ruleForm.id = this.handleDialogData.params.id
      this.ruleForm.createTime = this.handleDialogData.params.createTime
      this.ruleForm.isShowStars = this.handleDialogData.params.isShowStars
    }
  },
  methods: {
    // 点击确定
    confirmHandle(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.handleDialogData.type === 'add') {
            addCollege(
              this.ruleForm,
              (response) => {
                this.handleDialogData.isShow = false
                this.$emit('refreshList')
              },
              (response) => {
                this.$message({
                  message: response.message,
                  type: 'warning'
                })
              }
            )
          } else {
            if (this.ruleForm.status === 'DRAFT') {
              this.handleDialogData.isShow = false
              this.$message.error('不允许改为未发布状态!')
            } else {
              editCollege(
                this.ruleForm,
                (response) => {
                  this.$message({
                    message: '保存成功',
                    type: 'success'
                  })
                  this.handleDialogData.isShow = false
                  this.$emit('refreshList')
                },
                (response) => {
                  this.$message({
                    message: response.message,
                    type: 'warning'
                  })
                }
              )
            }
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang="less" scoped></style>
